<!-- 订单统计 -->
<template>
  <div class="box">
    <div ref="chartDom" style="width: 100%; height: 400px;" />
  </div>
</template>

<script>
  import { statOrder } from '@/api/stat'
  import * as echarts from 'echarts'

  export default {
    name: 'Chart',
    data() {
      return {
        myChart: null,
        option: null,
        columns: null,
        rows: null,
        day: [],
        li: ['订单量', '下单用户', '订单总额', '客单价'],
        amount: [],
        customers: [],
        orders: [],
        pcr: []
      }
    },
    mounted() {
      this.initChart()
    },
    methods: {
      initChart() {
        statOrder().then(res => {
          this.columns = res.data.data.columns
          this.rows = res.data.data.rows
          this.rows.map(item => {
            this.day.push(item.day)
          })
          this.rows.map(item => {
            this.amount.push(item.amount)
            this.customers.push(item.customers)
            this.orders.push(item.orders)
            this.pcr.push(item.pcr)
          })
          const chartDom = this.$refs.chartDom
          this.myChart = echarts.init(chartDom)
          this.option = {
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data: this.li
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: this.day
            },
            yAxis: {
              type: 'value'
            },
            series: this.li.map((item, index) => {
              switch (item) {
                case '订单量': return {
                  name: item,
                  type: 'line',
                  smooth: true,
                  data: this.orders
                }
                case '下单用户': return {
                  name: item,
                  type: 'line',
                  smooth: true,
                  data: this.customers
                }
                case '订单总额': return {
                  name: item,
                  type: 'line',
                  smooth: true,
                  data: this.amount
                }
                case '客单价': return {
                  name: item,
                  type: 'line',
                  smooth: true,
                  data: this.pcr
                }
                default:
                  return {}
              }
            })
          }
          this.myChart.setOption(this.option)
        })
      }
    }
  }
</script>

<style>
  .box {
    padding: 20px;
  }
</style>